<!DOCTYPE html>
<html lang="zh" xmlns:th="http://www.thymeleaf.org">
  <head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta name="renderer" content="webkit" />
    <title>智慧党建平台系统</title>
    <!-- 避免IE使用兼容模式 -->
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <link th:href="@{favicon.ico}" rel="shortcut icon" />
    <link th:href="@{/css/bootstrap.min.css}" rel="stylesheet" />
    <!-- Bootstrap Icons（图标库） -->
    <link th:href="@{/css/jquery.contextMenu.min.css}" rel="stylesheet" />
    <link th:href="@{/css/font-awesome.min.css}" rel="stylesheet" />
    <link th:href="@{/css/animate.min.css}" rel="stylesheet" />
    <link th:href="@{/css/style.min.css}" rel="stylesheet" />
    <link th:href="@{/css/skins-red.css}" rel="stylesheet" />
    <link th:href="@{/css/skin-red-sidebar.css}" rel="stylesheet" />
    <link th:href="@{/ruoyi/css/ry-ui.css?v=4.8.1}" rel="stylesheet" />
    <style>
      /* 党建主题样式 */
      body {
        background-color: #f8f9fa;
        font-family: "Microsoft YaHei", sans-serif;
        height: 100vh;
        margin: 0;
        padding: 0;
        overflow: hidden;
      }

      /* 头部样式 */
      .header {
        background: linear-gradient(135deg, #7a0000, #c00);
        color: #fff;
        padding: 15px 0;
        box-shadow: 0 2px 10px rgba(0, 0, 0, 0.2);
      }

      .header-title {
        font-size: 28px;
        font-weight: bold;
        text-align: center;
        margin: 10px 0;
        text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.3);
      }

      .header-subtitle {
        text-align: center;
        font-size: 16px;
        opacity: 0.9;
      }

      /* 主体内容区域 */
      .main-content {
        height: calc(100vh - 120px);
        overflow-y: auto;
        padding: 20px;
      }

      /* 统计卡片样式 */
      .stat-card {
        background: linear-gradient(135deg, #fff, #f8f9fa);
        border-radius: 10px;
        box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1);
        border: none;
        transition: all 0.3s ease;
        margin-bottom: 20px;
        border-left: 4px solid #c00;
      }

      .stat-card:hover {
        transform: translateY(-5px);
        box-shadow: 0 6px 20px rgba(0, 0, 0, 0.15);
      }

      .stat-card .card-body {
        padding: 20px;
      }

      .stat-icon {
        font-size: 36px;
        color: #c00;
        margin-right: 15px;
      }

      .stat-number {
        font-size: 28px;
        font-weight: bold;
        color: #c00;
      }

      .stat-label {
        font-size: 14px;
        color: #666;
      }

      /* 快速导航样式 */
      .nav-card {
        background: linear-gradient(135deg, #fff, #f8f9fa);
        border-radius: 10px;
        box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1);
        border: none;
        margin-bottom: 20px;
      }

      .nav-card .card-header {
        background: linear-gradient(135deg, #7a0000, #c00);
        color: white;
        border-radius: 10px 10px 0 0;
        font-weight: bold;
        font-size: 18px;
        padding: 15px 20px;
      }

      .nav-grid {
        display: grid;
        grid-template-columns: repeat(auto-fill, minmax(120px, 1fr));
        gap: 20px;
        padding: 20px;
      }

      .nav-item {
        text-align: center;
        cursor: pointer;
        transition: all 0.3s ease;
        padding: 15px 10px;
        border-radius: 8px;
      }

      .nav-item:hover {
        background: rgba(204, 0, 0, 0.1);
        transform: scale(1.05);
      }

      .nav-icon {
        font-size: 32px;
        color: #c00;
        margin-bottom: 10px;
      }

      .nav-text {
        font-size: 14px;
        color: #333;
      }

      /* 图表容器样式 */
      .chart-container {
        background: linear-gradient(135deg, #fff, #f8f9fa);
        border-radius: 10px;
        box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1);
        padding: 20px;
        margin-bottom: 20px;
        border-left: 4px solid #c00;
      }

      .chart-header {
        font-size: 18px;
        font-weight: bold;
        color: #333;
        margin-bottom: 15px;
        padding-bottom: 10px;
        border-bottom: 1px solid #eee;
      }

      .chart-wrapper {
        height: 350px;
        position: relative;
      }

      /* 日历和消息样式 */
      .calendar-card,
      .message-card {
        background: linear-gradient(135deg, #fff, #f8f9fa);
        border-radius: 10px;
        box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1);
        margin-bottom: 20px;
        border: none;
      }

      .calendar-card .card-header,
      .message-card .card-header {
        background: linear-gradient(135deg, #7a0000, #c00);
        color: white;
        border-radius: 10px 10px 0 0;
        font-weight: bold;
        font-size: 18px;
        padding: 15px 20px;
      }

      .calendar table {
        width: 100%;
        text-align: center;
      }

      .calendar .table td,
      .calendar .table th {
        border: 1px solid #dee2e6;
        padding: 8px;
      }

      .calendar .today {
        background-color: #c00;
        color: white;
        font-weight: bold;
      }

      .message-item {
        border-bottom: 1px solid #eee;
        padding: 12px 15px;
        transition: background-color 0.3s;
      }

      .message-item:hover {
        background-color: #f8f9fa;
      }

      .message-item:last-child {
        border-bottom: none;
      }

      .message-title {
        font-size: 14px;
        color: #333;
        margin-bottom: 5px;
      }

      .message-meta {
        display: flex;
        justify-content: space-between;
        font-size: 12px;
        color: #999;
      }

      .badge-unread {
        background-color: #c00;
      }

      /* 待办事项样式 */
      .todo-card {
        background: linear-gradient(135deg, #fff, #f8f9fa);
        border-radius: 10px;
        box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1);
        margin-bottom: 20px;
        border: none;
      }

      .todo-card .card-header {
        background: linear-gradient(135deg, #7a0000, #c00);
        color: white;
        border-radius: 10px 10px 0 0;
        font-weight: bold;
        font-size: 18px;
        padding: 15px 20px;
      }

      .todo-item {
        padding: 12px 20px;
        border-bottom: 1px solid #eee;
      }

      .todo-item:last-child {
        border-bottom: none;
      }

      .todo-title {
        font-size: 14px;
        color: #333;
        margin-bottom: 5px;
      }

      .todo-date {
        font-size: 12px;
        color: #999;
      }

      /* 响应式设计 */
      @media (max-width: 992px) {
        .nav-grid {
          grid-template-columns: repeat(auto-fill, minmax(100px, 1fr));
          gap: 15px;
        }

        .stat-number {
          font-size: 24px;
        }

        .main-content {
          height: calc(100vh - 140px);
        }
      }

      @media (max-width: 768px) {
        .header-title {
          font-size: 24px;
        }

        .nav-grid {
          grid-template-columns: repeat(4, 1fr);
        }

        .main-content {
          height: calc(100vh - 160px);
          padding: 10px;
        }
      }

      @media (max-width: 576px) {
        .nav-grid {
          grid-template-columns: repeat(3, 1fr);
        }

        .stat-number {
          font-size: 20px;
        }

        .chart-wrapper {
          height: 250px;
        }
      }

      /* 滚动条样式 */
      .main-content::-webkit-scrollbar {
        width: 8px;
      }

      .main-content::-webkit-scrollbar-track {
        background: #f1f1f1;
      }

      .main-content::-webkit-scrollbar-thumb {
        background: #c00;
        border-radius: 4px;
      }

      .main-content::-webkit-scrollbar-thumb:hover {
        background: #a00;
      }
    </style>
  </head>
  <body class="skin-red-sidebar">
    <!-- 头部区域 -->
    <div class="header">
      <div class="container-fluid">
        <div class="header-title">智慧党建平台系统</div>
        <div class="header-subtitle">不忘初心 牢记使命</div>
      </div>
    </div>

    <!-- 主体内容 -->
    <div class="main-content">
      <div class="container-fluid">
        <!-- 统计数据区域 -->
        <div class="row">
          <div class="col-lg-3 col-md-6">
            <div class="stat-card">
              <div class="card-body">
                <div class="d-flex align-items-center">
                  <div class="stat-icon">
                    <i class="fa fa-sitemap"></i>
                  </div>
                  <div>
                    <div class="stat-number">12</div>
                    <div class="stat-label">党组织数</div>
                  </div>
                </div>
              </div>
            </div>
          </div>
          <div class="col-lg-3 col-md-6">
            <div class="stat-card">
              <div class="card-body">
                <div class="d-flex align-items-center">
                  <div class="stat-icon">
                    <i class="fa fa-users"></i>
                  </div>
                  <div>
                    <div class="stat-number">342</div>
                    <div class="stat-label">党员总数</div>
                  </div>
                </div>
              </div>
            </div>
          </div>
          <div class="col-lg-3 col-md-6">
            <div class="stat-card">
              <div class="card-body">
                <div class="d-flex align-items-center">
                  <div class="stat-icon">
                    <i class="fa fa-star"></i>
                  </div>
                  <div>
                    <div class="stat-number">96</div>
                    <div class="stat-label">优秀党员</div>
                  </div>
                </div>
              </div>
            </div>
          </div>
          <div class="col-lg-3 col-md-6">
            <div class="stat-card">
              <div class="card-body">
                <div class="d-flex align-items-center">
                  <div class="stat-icon">
                    <i class="fa fa-calendar"></i>
                  </div>
                  <div>
                    <div class="stat-number">24</div>
                    <div class="stat-label">本月活动</div>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>

        <!-- 快速导航区域 -->
        <div class="nav-card">
          <div class="card-header"><i class="fa fa-rocket"></i> 快速导航</div>

          <div class="nav-grid">
            <div
              class="nav-item"
              onclick="openNavTab('江大制度', 'hui/manage/jiangda')"
            >
              <div class="nav-icon">
                <i class="fa fa-university"></i>
              </div>
              <div class="nav-text">江大制度</div>
            </div>
            <div
              class="nav-item"
              onclick="openNavTab('标准化制度', 'hui/manage/standard')"
            >
              <div class="nav-icon">
                <i class="fa fa-file-text"></i>
              </div>
              <div class="nav-text">标准化制度</div>
            </div>
            <div
              class="nav-item"
              onclick="openNavTab('学习视频', 'learn/video')"
            >
              <div class="nav-icon">
                <i class="fa fa-video-camera"></i>
              </div>
              <div class="nav-text">学习视频</div>
            </div>
            <div
              class="nav-item"
              onclick="openNavTab('学习材料', 'learn/xxcl')"
            >
              <div class="nav-icon">
                <i class="fa fa-book"></i>
              </div>
              <div class="nav-text">学习材料</div>
            </div>
            <div
              class="nav-item"
              onclick="openNavTab('党员评价', 'system/movement/partyMemberEvaluation')"
            >
              <div class="nav-icon">
                <i class="fa fa-star"></i>
              </div>
              <div class="nav-text">党员评价</div>
            </div>
            <div
              class="nav-item"
              onclick="openNavTab('组织生活', 'dj/theme/party/day')"
            >
              <div class="nav-icon">
                <i class="fa fa-calendar-check-o"></i>
              </div>
              <div class="nav-text">组织生活</div>
            </div>
            <div
              class="nav-item"
              onclick="openNavTab('党员管理', 'system/movement/partyMemberInfo')"
            >
              <div class="nav-icon">
                <i class="fa fa-user"></i>
              </div>
              <div class="nav-text">党员管理</div>
            </div>
            <div
              class="nav-item"
              onclick="openNavTab('组织地图', 'system/movement/partyBuildingMap')"
            >
              <div class="nav-icon">
                <i class="fa fa-sitemap"></i>
              </div>
              <div class="nav-text">组织地图</div>
            </div>
          </div>
        </div>

        <div class="row">
          <!-- 左侧主要内容 -->
          <div class="col-lg-8">
            <!-- 活动统计图表 -->
            <div class="chart-container">
              <div class="chart-header">
                <i class="fa fa-bar-chart"></i> 党建活动统计
              </div>
              <div class="chart-wrapper">
                <canvas id="activityChart"></canvas>
              </div>
            </div>
          </div>

          <!-- 右侧辅助内容 -->
          <div class="col-lg-4">
            <!-- 日历 -->
            <div class="calendar-card">
              <div class="card-header">
                <i class="fa fa-calendar-o"></i>
                <span id="currentMonthYear"></span>
              </div>
              <div class="card-body">
                <div class="calendar">
                  <table class="table table-bordered table-sm">
                    <thead>
                      <tr>
                        <th>日</th>
                        <th>一</th>
                        <th>二</th>
                        <th>三</th>
                        <th>四</th>
                        <th>五</th>
                        <th>六</th>
                      </tr>
                    </thead>
                    <tbody id="calendarBody">
                      <!-- 日历内容将通过JavaScript动态生成 -->
                    </tbody>
                  </table>
                </div>
              </div>
            </div>

            <!-- 消息通知 -->
            <div class="message-card">
              <div class="card-header"><i class="fa fa-bell"></i> 消息通知</div>
              <div class="card-body p-0">
                <div class="message-item">
                  <div class="message-title">
                    关于开展9月份主题党日活动的通知
                  </div>
                  <div class="message-meta">
                    <span>2025-09-15</span>
                    <span class="badge badge-unread">未读</span>
                  </div>
                </div>
                <div class="message-item">
                  <div class="message-title">
                    关于组织观看红色教育影片的通知
                  </div>
                  <div class="message-meta">
                    <span>2025-09-12</span>
                    <span class="badge badge-secondary">已读</span>
                  </div>
                </div>
                <div class="message-item">
                  <div class="message-title">第三季度党员学习资料已发布</div>
                  <div class="message-meta">
                    <span>2025-09-10</span>
                    <span class="badge badge-secondary">已读</span>
                  </div>
                </div>
                <div class="message-item">
                  <div class="message-title">
                    关于开展党建知识竞赛活动的通知
                  </div>
                  <div class="message-meta">
                    <span>2025-09-05</span>
                    <span class="badge badge-secondary">已读</span>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>

        <!-- 待办事项 -->
        <div class="todo-card">
          <div class="card-header"><i class="fa fa-tasks"></i> 待办事项</div>
          <div class="card-body p-0">
            <div class="todo-item">
              <div class="todo-title">组织9月份主题党日活动</div>
              <div class="todo-date">截止时间：2025-09-20</div>
            </div>
            <div class="todo-item">
              <div class="todo-title">完成第三季度党费收缴工作</div>
              <div class="todo-date">截止时间：2025-09-25</div>
            </div>
            <div class="todo-item">
              <div class="todo-title">开展新党员发展对象考察</div>
              <div class="todo-date">截止时间：2025-09-30</div>
            </div>
          </div>
        </div>
      </div>
    </div>

    <!-- 引入必要的JavaScript库 -->
    <script th:src="@{/js/jquery.min.js}"></script>
    <script th:src="@{/js/bootstrap.min.js}"></script>
    <script th:src="@{/ajax/libs/layer/layer.min.js}"></script>
    <script th:src="@{/ruoyi/js/common.js}"></script>
    <script th:src="@{/ruoyi/js/ry-ui.js}"></script>
    <script th:inline="javascript">
      var ctx = /*[[${#request.getContextPath()}]]*/ "";
    </script>
    <!-- Chart.js图表库 -->
    <script
      th:src="@{/ajax/libs/Chart.js/chart.min.js}"
      onerror="this.src='https://cdn.jsdelivr.net/npm/chart.js@3.9.1/dist/chart.min.js'"
    ></script>
    <script>
      // 导航函数
      function openNavTab(title, url) {
        // 确保url以/开头，避免路径拼接问题
        var fullUrl = url.startsWith("/") ? url : "/" + url;
        // 如果ctx不为空且不是/，则添加ctx前缀
        if (ctx && ctx !== "" && ctx !== "/") {
          fullUrl = ctx + fullUrl;
        }
        console.log("Opening tab:", title, "URL:", fullUrl);
        $.modal.openTab(title, fullUrl);
      }

      // 页面加载完成后初始化图表和日历
      $(function () {
        // 初始化图表
        const chartCtx = document
          .getElementById("activityChart")
          .getContext("2d");
        const activityChart = new Chart(chartCtx, {
          type: "bar", // 柱状图类型
          data: {
            labels: [
              "1月",
              "2月",
              "3月",
              "4月",
              "5月",
              "6月",
              "7月",
              "8月",
              "9月",
            ],
            datasets: [
              {
                label: "集中学习",
                data: [8, 6, 9, 12, 10, 8, 5, 3, 2],
                backgroundColor: "rgba(204, 0, 0, 0.7)",
                borderColor: "rgba(204, 0, 0, 1)",
                borderWidth: 1,
              },
              {
                label: "主题党日",
                data: [4, 5, 4, 6, 5, 4, 3, 2, 1],
                backgroundColor: "rgba(122, 0, 0, 0.7)",
                borderColor: "rgba(122, 0, 0, 1)",
                borderWidth: 1,
              },
              {
                label: "志愿服务",
                data: [6, 4, 7, 9, 8, 6, 4, 3, 2],
                backgroundColor: "rgba(255, 102, 102, 0.7)",
                borderColor: "rgba(255, 102, 102, 1)",
                borderWidth: 1,
              },
            ],
          },
          options: {
            responsive: true,
            maintainAspectRatio: false,
            scales: {
              y: {
                beginAtZero: true,
                grid: {
                  color: "rgba(0, 0, 0, 0.05)",
                },
              },
              x: {
                grid: {
                  display: false,
                },
              },
            },
            plugins: {
              legend: {
                position: "top",
              },
            },
          },
        });

        // 导航项事件已在onclick中处理，无需额外绑定

        // 初始化日历
        initializeCalendar();
      });

      // 初始化日历函数
      function initializeCalendar() {
        const now = new Date();
        const year = now.getFullYear();
        const month = now.getMonth();

        // 显示当前年月
        const monthNames = [
          "1月",
          "2月",
          "3月",
          "4月",
          "5月",
          "6月",
          "7月",
          "8月",
          "9月",
          "10月",
          "11月",
          "12月",
        ];
        document.getElementById("currentMonthYear").textContent =
          year + "年" + monthNames[month];

        // 获取当月第一天和最后一天
        const firstDay = new Date(year, month, 1);
        const lastDay = new Date(year, month + 1, 0);

        // 获取当月天数和第一天是星期几
        const daysInMonth = lastDay.getDate();
        const firstDayOfWeek = firstDay.getDay();

        // 获取今天的日期
        const today = now.getDate();

        // 生成日历表格
        const calendarBody = document.getElementById("calendarBody");
        calendarBody.innerHTML = "";

        let date = 1;
        // 生成6行7列的日历
        for (let i = 0; i < 6; i++) {
          const row = document.createElement("tr");

          for (let j = 0; j < 7; j++) {
            const cell = document.createElement("td");

            // 如果是第一行且j小于第一天的星期几，则显示上个月的日期（留空）
            if (i === 0 && j < firstDayOfWeek) {
              cell.innerHTML = "";
            }
            // 如果日期已经超出当月天数，则留空
            else if (date > daysInMonth) {
              cell.innerHTML = "";
            }
            // 否则显示当前日期
            else {
              cell.textContent = date;
              // 如果是今天，则添加特殊样式
              if (date === today) {
                cell.classList.add("today");
              }
              date++;
            }

            row.appendChild(cell);
          }

          calendarBody.appendChild(row);

          // 如果日期已经填完，跳出循环
          if (date > daysInMonth) {
            break;
          }
        }
      }
    </script>
  </body>
</html>
